<template>
  <div>
    <div>
      <el-button type="primary" style="margin: 10px 10px" @click="showaddView"
        >添加房型折扣</el-button
      >
      <el-table
        ref="singleTable"
        :data="RoomTpyeDiscountData"
        stripe
        height="370"
        border
        style="width: 80%"
        v-loading="loading"
        highlight-current-row
        @current-change="handleClickChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column
          prop="roomTypeDiscountId"
          label="房型折扣ID"
          width="180"
        >
        </el-table-column>
        <el-table-column prop="roomType.roomTypeName" label="房型名称">
        </el-table-column>
        <el-table-column prop="pricingRule.pricingRuleName" label="折扣名称">
        </el-table-column>
        <el-table-column prop="pricingRule.discount" label="折扣">
        </el-table-column>
        <el-table-column prop="pricingRule.startDate" label="开始时间">
        </el-table-column>
        <el-table-column prop="pricingRule.endingDate" label="结束时间">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 设置分页开始 -->
      <el-pagination
        :current-page="pageNum"
        :page-sizes="[5, 10, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
      <!-- 设置分页结束 -->
    </div>

    <el-dialog
      title="添加房型折扣"
      :visible.sync="dialogaddVisible"
      width="30%"
    >
      <div>
        <el-form ref="editform" :model="editform">
          <el-form-item
            style="margin-right: 10px"
            label="房型名称"
            :rules="[
              { required: true, message: '请输入房型名称', trigger: 'blur' }
            ]"
          >
            <el-select
              v-model="editform.roomTypeId"
              placeholder="请选择房型"
              @change="$forceUpdate()"
            >
              <el-option
                v-for="item in roomtypeOptions"
                :key="item.roomTypeId"
                :label="item.roomTypeName"
                :value="item.roomTypeId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <br />
          <el-form-item
            style="margin-right: 10px"
            label="折扣名称"
            :rules="[
              { required: true, message: '请输入折扣名称', trigger: 'blur' }
            ]"
          >
            <el-select
              v-model="editform.pricingRuleId"
              placeholder="请选择折扣"
            >
              <el-option
                v-for="item in discountOptions"
                :key="item.pricingRuleId"
                :label="item.pricingRuleName"
                :value="item.pricingRuleId"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogaddVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="addNewdiscount"
          @keydown.enter.native="addNewdiscount"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  listRoomTypeDiscount,
  addRoomTypeDiscount,
  deleteRoomTypeDiscount
} from "@/api/roomTypeDiscount";
import { listRoomtype } from "../api/roomtype";
import { listAllDiscount } from "../api/discount";
export default {
  name: "Roomtype",
  data() {
    return {
      currentRow: null,
      // 遮罩层
      loading: false,
      // 总条数
      total: 0,
      // 当前页
      pageNum: 0,
      // 每页数据量
      pageSize: 0,
      // 类型表格数据
      RoomTpyeDiscountData: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 5,
        pricingRuleId: null,
        roomTypeId: null
      },
      //房间类型选项
      roomtypeOptions: undefined,
      //折扣选项
      discountOptions: undefined,
      // 添加表单参数
      form: {},
      //修改参数
      editform: {
        roomTypeId: undefined,
        pricingRuleId: undefined
      },
      dialogeditVisible: false,
      dialogaddVisible: false
    };
  },
  mounted() {
    this.initRoomTpyeDiscountData();
    // 查询所有roomtype赋值roomtypeOptions
    listRoomtype().then(response => {
      this.roomtypeOptions = response.data.data;
    });
    // 查询所有discount赋值discountOptions
    listAllDiscount().then(response => {
      this.discountOptions = response.data.data;
    });
  },
  methods: {
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.initRoomTpyeDiscountData();
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.initRoomTpyeDiscountData();
    },
    //重置表格
    resetform() {
      this.editform = {
        pricingRuleId: undefined,
        roomTypeId: undefined
      };
    },
    //添加房型
    showaddView() {
      this.dialogaddVisible = true;
      this.resetform();
    },
    addNewdiscount() {
      if (
        typeof this.editform.roomTypeId === "undefined" ||
        typeof this.editform.pricingRuleId === "undefined"
      ) {
        this.$message.error("请输入完整信息！");
      } else {
        console.log(this.editform);
        addRoomTypeDiscount(this.editform)
          .then(resp => {
            if (resp) {
              this.initRoomTpyeDiscountData();
              console.log(resp.data);
              if (resp.data.code == "200") {
                this.$message.success(resp.data);
              } else {
                this.$message.error(resp.data);
              }
            }
            this.dialogaddVisible = false;
          })
          .catch(error => {
            // 错误分为 status-请求错误 和 code-账号密码错误
            this.$message.error(error);
            console.log(error);
          });
      }
      this.resetform();
    },
    //删除房型
    handleDelete(row) {
      this.$confirm(
        '是否确认删除名称为"' +
          row.roomType.roomTypeName +
          '"中"' +
          row.pricingRule.pricingRuleName +
          '"的数据项?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          deleteRoomTypeDiscount(row.roomTypeDiscountId)
            .then(resp => {
              if (resp.data.code == "200") {
                this.initRoomTpyeDiscountData();
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
              } else {
                this.$message({
                  type: "info",
                  message: "删除失败!"
                });
              }
            })
            .catch(error => {
              // 错误分为 status-请求错误 和 code-账号密码错误
              this.$message.error(error);
              console.log(error);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //折扣列表数据
    initRoomTpyeDiscountData() {
      this.loading = true;
      listRoomTypeDiscount(this.queryParams)
        .then(resp => {
          if (resp.data.code == "200") {
            this.RoomTpyeDiscountData = resp.data.data.list; //api读取数据
            this.total = resp.data.data.total;
            console.log(resp.data);
          }
          this.loading = false;
        })
        .catch(error => {
          // 错误分为 status-请求错误 和 code-账号密码错误
          this.$message.error(error);
          console.log(error);
        });
    },
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
    },
    handleClickChange(val) {
      this.currentRow = val;
    }
  }
};
</script>

<style></style>
